<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
	<title>CRM-contact-addcontact</title>
	<%@ include file="include/head.jsp" %>
	<meta charset="UTF-8">
	<title></title>
</head>
<body class="crm">
	
	<jsp:include page="include/top.jsp">
		<jsp:param value="contact" name="tag"/>
	</jsp:include>
	
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span8">
				<div class="well screen">
					<div class="page-header header">
						<div class="right-links">
							<a href="${basePath }/contact/add.action?t=company">添加公司</a>
						</div>
						添加联系人
					</div>
					<div class="live_search_spinner" behavior="spinner" id="parties_loading">
					  <div class="liner">
					    <h3>处理中...</h3>
					    <img src="${basePath }/img/indicator.gif" alt="WorkXP">
					  </div>
					</div>
					
					<div class="main" id="main">
						


		<form accept-charset="UTF-8" action="save.action" class="simple_form form-horizontal" id="contact_form" method="post" novalidate="novalidate">

			<div class="control-group string required">
				<label class="string required control-label" for="person_name">
					<abbr title="required" style="color:red">*</abbr> 
						姓名
				</label>	
				<div class="controls">
					<input class="string required" id="person_name" name="contact.name" size="50" type="text">
				</div>
			</div>
			
			<div class="control-group string optional">
				<label class="string optional control-label" for="person_title">
					职位
				</label>
				<div class="controls">
					<input class="string optional" id="person_title" name="contact.title" size="50" type="text">
				</div>
			</div>
			
			<div class="control-group string optional marco_polo_container">
				<label class="string optional control-label" for="person_company_name"> 
					公司
				</label>
				<div class="controls">
					<input class="string optional input-xlarge mp_input" id="person_company_name" name="contact.companyname" size="50" type="text" autocomplete="off">
						<ul class="typeahead dropdown-menu mp_list" style="display: none; "></ul>
				</div>
			</div>
			<input id="person_company_id" name="company.id" type="hidden">
			
			<div class="control-group tel optional">
				<label class="tel optional control-label" for="person_contact_phone">
					电话
				</label>
				<div class="controls">
					<div class="contact_forms contact_phones" id="contact_phone_list_company">
						<div id="blank_slate_company_contact_phone" class="blank_slate" style="">
							添加一个电话号码
						</div>
						
						<div class="contact_methods" style="display: none; ">
							<div id="contact_phone_97e92dd0-c133-012f-5d39-000c29568e7b" class="contact_method new_contact_method edit_phone">
			
								<input class="autofocus" id="person_contact_phones__value" name="telnums" size="30" type="text">
								<select id="person_contact_phones__key" name="teltypes">
									<option value="office">工作</option>
									<option value="home">家庭</option>
									<option value="other">其它</option>
								</select>
								<span class="addremove" >
									<a href="javascript:;" class="remove">
										<span class="icon-remove"></span>
									</a>
								</span>
							</div>
							<div id="add_company_contact_phone" class="add_contact_method" style="display: none;">
							  <div class="add"><a href="javascript:;">添加..</a></div>
							</div>
						</div>
					</div>
					<!--动态生成标签-->
		<script type="text/javascript">
			//<![CDATA[
			$(document).ready(function() {
				var contact_phone_manger = new ContactInfo.ContactForm("#contact_phone_list_company", "<div  class=\"contact_method new_contact_method edit_phone\">\n	\n		<input class=\"autofocus\" id=\"person_contact_phones__value\" name=\"telnums\" size=\"30\" type=\"text\" />\n		<select id=\"person_contact_phones__key\" name=\"teltypes\"><option value=\"work\">工作<\/option>\n<option value=\"home\">家庭<\/option>\n<option value=\"other\">其它<\/option><\/select>\n		<span class=\"addremove\"><a href=\"#\" class=\"remove\"><span class=\"icon-remove\"></span><\/a><\/span>\n<\/div>");
				setInterval(function(){
					if(contact_phone_manger.present()){
						contact_phone_manger.toggle();
					}
				}, 1000);
			}) ;
			//]]>
		</script>
		
			</div>
		</div>	
		
		<!--  -->
		<div class="control-group email optional">
			<label class="email optional control-label" for="person_contact_email"> 
				邮箱
			</label>
			<div class="controls">
				<div class="contact_forms contact_emails" id="contact_email_list_company">
					<div id="blank_slate_company_contact_email" class="blank_slate" style="">
						添加一个Email地址
					</div>
					<div class="contact_methods" style="display: none; ">
					
					<div id="contact_email_97f05fd0-c133-012f-5d3a-000c29568e7b" class="contact_method new_contact_method edit_phone">
			
						<input class="autofocus" id="person_contact_emails__value" name="mails" size="30" type="text">
						<select id="person_contact_emails__key" name="mailtypes">
							<option value="work">工作</option>
							<option value="personal">个人</option>
							<option value="other">其它</option>
						</select>
						<span class="addremove">
							<a href="javascript:;" class="remove"><span class="icon-remove"></span></a>
						</span>
					</div>
					<div id="add_company_contact_email" class="add_contact_method" style="display: none;">
					  <div class="add"><a href="javascript:;">添加..</a></div>
					</div>
			</div>
		</div>
		<script type="text/javascript">
			//<![CDATA[
			$(document).ready(function() {
				var contact_email_manger = new ContactInfo.ContactForm("#contact_email_list_company", "<div  class=\"contact_method new_contact_method edit_phone\">\n	\n		<input class=\"autofocus\" id=\"person_contact_emails__value\" name=\"mails\" size=\"30\" type=\"text\" />\n		<select id=\"person_contact_emails__key\" name=\"mailtypes\"><option value=\"work\">工作<\/option>\n<option value=\"personal\">个人<\/option>\n<option value=\"other\">其它<\/option><\/select>\n		<span class=\"addremove\"><a href=\"#\" class=\"remove\"><span class=\"icon-remove\"></span><\/a><\/span>\n<\/div>");
				setInterval(function(){
					if(contact_email_manger.present()){
						contact_email_manger.toggle();
					}
				}, 1000);
			}) ;
			//]]>
		</script>
		
			</div>
		</div>
		
		<div class="control-group string optional">
			<label class="string optional control-label" for="person_contact_im"> IM</label>
			<div class="controls">
				<div class="contact_forms contact_ims" id="contact_im_list_company">
					<div id="blank_slate_company_contact_im" class="blank_slate" style="">添加一个即时聊天帐号</div>
					<div class="contact_methods" style="display: none; ">
					
					<div id="contact_im_97f32740-c133-012f-5d3b-000c29568e7b" class="contact_method new_contact_method edit_phone">
			
						<input class="autofocus" id="person_contact_ims__value" name="ims" size="30" type="text">
						<select id="person_contact_ims__key" name="imtypes">
							<option value="qq">QQ</option>
							<option value="gtalk">GTalk</option>
							<option value="msn">MSN</option>
							
						</select>
						<span class="addremove">
							<a href="javascript:;" class="remove"><span class="icon-remove"></span></a>
						</span>
					</div>
					<div id="add_company_contact_im" class="add_contact_method" style="display: none;">
					  <div class="add"><a href="javascript:;">添加..</a></div>
					</div>
			</div>
		</div>
		<script type="text/javascript">
			//<![CDATA[
			$(document).ready(function() {
				var contact_im_manger = new ContactInfo.ContactForm("#contact_im_list_company", "<div  class=\"contact_method new_contact_method edit_phone\">\n	\n		<input class=\"autofocus\" id=\"person_contact_ims__value\" name=\"ims\" size=\"30\" type=\"text\" />\n		<select id=\"person_contact_ims__key\" name=\"imtypes\"><option value=\"qq\">QQ<\/option>\n<option value=\"gtalk\">GTalk<\/option>\n<option value=\"msn\">MSN<\/option>\n<\/select>\n		<span class=\"addremove\"><a href=\"#\" class=\"remove\"><span class=\"icon-remove\"></span><\/a><\/span>\n<\/div>");
				setInterval(function(){
					if(contact_im_manger.present()){
						contact_im_manger.toggle();
					}
				}, 1000);
			}); 
			//]]>
		</script>
			</div>
		</div>	
		
		<div class="control-group string optional"><label class="string optional control-label" for="person_contact_website"> 网站</label><div class="controls">
				<div class="contact_forms contact_websites" id="contact_website_list_company">
				<div id="blank_slate_company_contact_website" class="blank_slate" style="">添加一个网址</div>
				<div class="contact_methods" style="display: none; ">
					
					<div id="contact_website_9824b6f0-c133-012f-5d3c-000c29568e7b" class="contact_method new_contact_method edit_phone">
			
						<input class="autofocus" id="person_contact_websites__value" name="websites" size="30" type="text">
							<select id="person_contact_websites__key" name="websitetypes">
								<option value="office">公司</option>
								<option value="personal">个人</option>
								<option value="other">其它</option>
							</select>
							<span class="addremove">
								<a href="javascript:;" class="remove"><span class="icon-remove"></span></a>
							</span>
					</div>
					<div id="add_company_contact_website" class="add_contact_method" style="display: none;">
					  <div class="add"><a href="javascript:;">添加..</a></div>
					</div>
			</div>
		</div>
		<script type="text/javascript">
			//<![CDATA[
			$(document).ready(function() {
				var contact_website_manger = new ContactInfo.ContactForm("#contact_website_list_company", "<div  class=\"contact_method new_contact_method edit_phone\">\n	\n		<input class=\"autofocus\" id=\"person_contact_websites__value\" name=\"websites\" size=\"30\" type=\"text\" />\n		<select id=\"person_contact_websites__key\" name=\"websitetypes\"><option value=\"office\">公司<\/option>\n<option value=\"personal\">个人<\/option>\n<option value=\"other\">其它<\/option><\/select>\n		<span class=\"addremove\"><a href=\"#\" class=\"remove\"><span class=\"icon-remove\"></span><\/a><\/span>\n<\/div>");
				setInterval(function(){
					if(contact_website_manger.present()){
						contact_website_manger.toggle();
					}
				}, 1000);
			});
			//]]>
		</script>
				</div>
			</div>	
			
			<div class="control-group string optional">
				<label class="string optional control-label" for="person_contact_address">
					地址
				</label>
				<div class="controls">
					<input class="string optional" id="person_contact_addresses__value" name="contact.address" size="30" type="text">
				</div>
			</div>
	
	
			<input id="person_contact_sns_attributes_0_key" name="person[contact_sns_attributes][0][key]" type="hidden" value="weibo">
			<div class="control-group string optional">
				<label class="string optional control-label" for="person_contact_sns_attributes_0_value">微博</label>
					<div class="controls">
						<input class="string optional" id="person_contact_sns_attributes_0_value" name="contact.weibo" size="50" type="text">
						<span class="add-on">@</span>
						<select id="" name="contact.weibotype" style="width:60px">
							<option value="weibo.com">新浪</option>
							<option value="qq.com">腾讯</option>
						</select>
						<p class="help-block">输入微博昵称或ID</p>
					</div>
					
			</div>
			

			<div class="control-group text optional">
				<label class="text optional control-label" for="person_others"> 背景信息</label>
				<div class="controls">
					<textarea class="text optional content" cols="40" id="person_others" name="contact.content" rows="20"></textarea>
					<p class="help-block">简介，如何认识的等</p>
				</div>
			</div>

			<!--选择可见性的部分-->
			<div class="control-group string optional"><label class="string optional control-label" for="person_access_policy"> 谁可以看见？</label><div class="controls">
			
			 <div id="select_access_policy_for_Contact_" class="select_access_policy">
			<div class="radio scope activated">
				<input checked="checked" id="person_access_policy_attributes_scope_everyone" name="contact.view" type="radio" value="a"> 所有同事
			</div>
			<div class="radio scope ">
				<input id="person_access_policy_attributes_scope_owner" name="contact.view" type="radio" value="m:${sessionScope.user.id }"> 只有我能看见
			</div>
			<div class="radio scope ">
				<input id="person_access_policy_attributes_scope_namedgroup" name="contact.view" type="radio" value="NamedGroup"> 选择一个组...
			<div class="editor">
		  	<select class="named_group" id="group" name="person[access_policy_attributes][group_id]">
		  		<option value="">选择一个组</option>
				<c:forEach items="${groups }" var="group">
					<option value="m:${sessionScope.user.id},g:${group.id }">${group.groupname }</option>
				</c:forEach>
				
			</select> 
			</div>
			</div>
		<div class="radio scope">
			<input id="person_access_policy_attributes_scope_adhocgroup" name="contact.view" type="radio" value="AdhocGroup"> 选择同事...
			<div class="editor">
	  		<select class="new_adhoc_group_member" id="member" name="view">
	  			<c:forEach items="${users }" var="user">
	  				<c:if test="${user.id != sessionScope.user.id}">
	  					<option value="m:${sessionScope.user.id},u:${user.id}">${user.username }</option>
	  				</c:if>
	  			</c:forEach>
		  		
			</select> 
			</div>
		</div>
		</div>
		</div>
	

		<script>
			var container = $('#select_access_policy_for_Contact_');
			$('.scope input[type=radio]', container).live('click', function(event) {
			var activated = $(event.target).parent();
			$('.scope.activated', container).removeClass('activated');
			activated.addClass('activated');
				changePermission();
		  });
			
			$(document).ready(function(){
				
				$("#group").change(function() {
					$("#person_access_policy_attributes_scope_namedgroup").attr("value",$("#group").val());
				});
				
				$("#member").change(function() {
					$("#person_access_policy_attributes_scope_adhocgroup").attr("value",$("#member").val());
				});
			});

		</script>
		
			</div>

		<div class="form-actions">
			<input class="btn btn-primary" data-loading-text="处理中.." name="commit" type="submit" value="保存联系人">
				<input class="btn btn-success" data-loading-text="处理中.." name="next_action" type="submit" value="保存并继续添加联系人">
				<a href="https://1343817168.workxp.info/contacts" class="btn">取消</a>
		</div>
		
		</form>
		
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$('#person_company_name').marcoPolo({
		  url: 'search.action',
		  formatItem: function (data, $item) {
		    return data.name;
		  },
		  onSelect: function (data, $item) {
		    $('#person_company_name').val(data.name);
				$('#person_company_id').val(data.id);
		  }
		});
		
		
		validate_form("#contact_form");
		$('#person_name').focus();
	});
</script>

					</div>
				</div>
			</div>
			
			<div class="span4 sidebar">
					<div class="well">
						<legend>您还可以通过以下方式导入联系人</legend>
							<ul>
								
								<li><a href="import.action?f=csv">上传CSV文件</a></li>
								<p>大部分数据库和表格程序都可以导出CSV格式的文件</p>
								
								<li><a href="import.action?f=excel">上传Excel文件</a></li>
								<p>目前我们只支持微软老版本的Excel格式，还不支持.xlsx格式，请在导入前转成.xls格式</p>
							</ul>
					</div>
			</div>
		</div>
	</div>
	
</body>
</html>
